<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>乐优商城--购物车页面</title>

  <link rel="stylesheet" type="text/css" href="css/webbase.css" />
  <link rel="stylesheet" type="text/css" href="css/pages-cart.css" />
</head>

<body>

  <div id="cartApp">

    <div class="top">
      <shortcut />
    </div>

    <div class="cart py-container">

      <!--logoArea-->
      <div class="logoArea">
        <div class="fl logo"><span class="title">购物车</span></div>
      </div>

      <!--All goods-->
      <div class="allgoods">
        <h4>全部商品<span>11</span></h4>
        <div class="cart-main">
          <div class="yui3-g cart-th">
            <div class="yui3-u-1-4"><input type="checkbox" v-model="selectAll" /> 全部</div>
            <div class="yui3-u-1-4">商品</div>
            <div class="yui3-u-1-8">单价（元）</div>
            <div class="yui3-u-1-8">数量</div>
            <div class="yui3-u-1-8">小计（元）</div>
            <div class="yui3-u-1-8">操作</div>
          </div>
          <div class="cart-item-list">

            <div class="cart-body">
              <div class="cart-list">
                <ul class="goods-list yui3-g" v-for="(c,i) in carts" :key="c.skuId">
                  <li class="yui3-u-1-24">
                    <input type="checkbox" name="" v-model="selectedCarts" :value="c" :disabled="!c.enable" />
                  </li>
                  <li class="yui3-u-11-24">
                    <div class="good-item">
                      <div class="item-img"><a :href="'/item/'+c.spuId+'.html'" target="_blank"><img :src="c.image"
                            width="80px" height="80px" /></a></div>
                      <div class="item-msg">
                        <span>
                          <p v-text="c.title" style="overflow: hidden"></p>
                          <span v-for="(v,k) in  JSON.parse(c.spec)" :key="k">
                            <a href="#" @click.prevent="">{{v}}</a> |
                          </span>
                        </span>
                      </div>
                    </div>
                  </li>

                  <li class="yui3-u-1-8">
                    <span style="line-height:70px " class="price" v-text="ly.formatPrice(c.newPrice)"></span><br />
                    <span v-if="c.newPrice < c.price" style="color: #bf360c;"
                      v-text="'比加入时便宜：￥' + ly.formatPrice(c.price - c.newPrice)"></span>
                  </li>
                  <li class="yui3-u-1-8" style="padding-top: 20px">
                    <a href="javascript:void(0)" class="increment mins" @click="decrement(c)">-</a>
                    <input autocomplete="off" :disabled="c.num > c.stock" type="text" v-model="c.num"
                      @blur="watchNum(c)" minnum="1" class="itxt" />
                    <a href="javascript:void(0)" class="increment plus" @click="increment(c)">+</a>
                  </li>
                  <li class="yui3-u-1-8"><span style="line-height:70px " class="sum"
                      v-text="ly.formatPrice(c.newPrice * c.num)"></span></li>
                  <li class="yui3-u-1-8">
                    <a href="#" @click.prevent="deleteCart(i)">删除</a><br />
                    <a href="#none">移到我的关注</a><br />
                    <span v-show="!c.enable" style="color: red;">商品已经下架</span>
                    <span v-show="c.num > c.stock" style="color: red;">商品库存不足</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

        </div>
        <div class="cart-tool">
          <div class="select-all">
            <input type="checkbox" v-model="selectAll" />
            <span>全选</span>
          </div>
          <div class="option">
            <a href="#none">删除选中的商品</a>
            <a href="#none">移到我的关注</a>
            <a href="#none">清除下架商品</a>
          </div>
          <div class="toolbar">
            <div class="chosed">已选择<span v-text="selectedCarts.length"></span>件商品</div>
            <div class="sumprice">
              <span><em>总价（不含运费） ：</em><i class="summoney" v-text="ly.formatPrice(totalPrice)"></i></span>
              <span><em>已节省：</em><i>-¥20.00</i></span>
            </div>
            <div class="sumbtn">
              <a class="sum-btn" href="#" @click.prevent="toOrderInfo" target="_blank">结算</a>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="deled">
          <span>已删除商品，您可以重新购买或加关注：</span>
          <div class="cart-list del">
            <ul class="goods-list yui3-g">
              <li class="yui3-u-1-2">
                <div class="good-item">
                  <div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
                </div>
              </li>
              <li class="yui3-u-1-6"><span class="price">8848.00</span></li>
              <li class="yui3-u-1-6">
                <span class="number">1</span>
              </li>
              <li class="yui3-u-1-8">
                <a href="#none">重新购买</a>
                <a href="#none">移到我的关注</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="liked">
          <ul class="sui-nav nav-tabs">
            <li class="active">
              <a href="#index" data-toggle="tab">猜你喜欢</a>
            </li>
            <li>
              <a href="#profile" data-toggle="tab">特惠换购</a>
            </li>
          </ul>
          <div class="clearfix"></div>
          <div class="tab-content">
            <div id="index" class="tab-pane active">
              <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
                <div class="carousel-inner">
                  <div class="active item">
                    <ul>
                      <li>
                        <img src="img/like1.png" />
                        <div class="intro">
                          <i>Apple苹果iPhone 6s (A1699)</i>
                        </div>
                        <div class="money">
                          <span>$29.00</span>
                        </div>
                        <div class="incar">
                          <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
                              class="cartxt">加入购物车</span></a>
                        </div>
                      </li>
                      <li>
                        <img src="img/like2.png" />
                        <div class="intro">
                          <i>Apple苹果iPhone 6s (A1699)</i>
                        </div>
                        <div class="money">
                          <span>$29.00</span>
                        </div>
                        <div class="incar">
                          <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
                              class="cartxt">加入购物车</span></a>
                        </div>
                      </li>
                      <li>
                        <img src="img/like3.png" />
                        <div class="intro">
                          <i>Apple苹果iPhone 6s (A1699)</i>
                        </div>
                        <div class="money">
                          <span>$29.00</span>
                        </div>
                        <div class="incar">
                          <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
                              class="cartxt">加入购物车</span></a>
                        </div>
                      </li>
                      <li>
                        <img src="img/like4.png" />
                        <div class="intro">
                          <i>Apple苹果iPhone 6s (A1699)</i>
                        </div>
                        <div class="money">
                          <span>$29.00</span>
                        </div>
                        <div class="incar">
                          <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
                              class="cartxt">加入购物车</span></a>
                        </div>
                      </li>
                    </ul>
                  </div>
                  <div class="item">
                    <ul>
                      <li>
                        <img src="img/like1.png" />
                        <div class="intro">
                          <i>Apple苹果iPhone 6s (A1699)</i>
                        </div>
                        <div class="money">
                          <span>$29.00</span>
                        </div>
                        <div class="incar">
                          <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
                              class="cartxt">加入购物车</span></a>
                        </div>
                      </li>
                      <li>
                        <img src="img/like2.png" />
                        <div class="intro">
                          <i>Apple苹果iPhone 6s (A1699)</i>
                        </div>
                        <div class="money">
                          <span>$29.00</span>
                        </div>
                        <div class="incar">
                          <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
                              class="cartxt">加入购物车</span></a>
                        </div>
                      </li>
                      <li>
                        <img src="img/like3.png" />
                        <div class="intro">
                          <i>Apple苹果iPhone 6s (A1699)</i>
                        </div>
                        <div class="money">
                          <span>$29.00</span>
                        </div>
                        <div class="incar">
                          <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
                              class="cartxt">加入购物车</span></a>
                        </div>
                      </li>
                      <li>
                        <img src="img/like4.png" />
                        <div class="intro">
                          <i>Apple苹果iPhone 6s (A1699)</i>
                        </div>
                        <div class="money">
                          <span>$29.00</span>
                        </div>
                        <div class="incar">
                          <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i class="car"></i><span
                              class="cartxt">加入购物车</span></a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
                <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
              </div>
            </div>
            <div id="profile" class="tab-pane">
              <p>特惠选购</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <script src="./js/vue/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
    const cartVm = new Vue({
      el: "#cartApp",
      data: {
        ly,
        carts: [],
        user: null,
        selectedCarts: [],
        enableCarts: [],
        selectAll: true
      },
      async created() {
        try {
          const resp = await ly.http.get("/auth/user/verify");
          this.user = resp.data;
          setTimeout(() => {
            this.user = undefined;
            // 重新登录
            window.location.href = "http://www.leyou.com/login.html?returnUrl=" + window.location.href;
          }, 1700000);
        } catch {
        }
        this.loadCarts();
      },
      methods: {
        isLogin() {
          return new Promise((resolve, reject) => {
            if (this.user) {
              resolve(true);
            } else {
              reject(false);
            }
          });
        },
        loadSku(carts) {
          return new Promise((resolve, reject) => {
            const ids = carts.map(c => {
              c.saleable = false;
              return c.skuId;
            });
            ly.http.get("/item/goods/sku/list?ids=" + ids.join(",")).then(({ data: skus }) => {
              carts.forEach(c => {
                const sku = skus.find(s => s.id === c.skuId);
                if (sku) {
                  c.newPrice = sku.price;
                  c.stock = sku.stock;
                  c.spuId = sku.spuId;
                  c.enable = sku.saleable;
                } else {
                  c.enable = false;
                }
              });
              resolve();
            }).catch(e => {
              reject(e);
            })
          })
        },
        loadCarts() {
          // 查询购物车
          this.isLogin().then(() => {
            // 判断本地未登录购物车是否存在，
            const carts = ly.store.get("carts") || [];
            if (carts.length > 0) {
              // 如果存在，发到后台，添加到redis，删除本地购物车
              ly.http.post("/trade/cart/list", carts).then(() => {
                // 查询购物车
                this.handleLoginCarts();
                // 删除本地购物车
                ly.store.del("carts");
              }).catch(() => {
                //alert("购物车数据更新失败！")
                this.handleLoginCarts();
              })
            } else {
              // 查询购物车
              this.handleLoginCarts();
            }
            // 查询购物车
            // this.handleLoginCarts();
          }).catch(() => {
            // 未登录
            console.log("未登录")
            const carts = ly.store.get("carts");
            this.loadSku(carts)
              .then(() => {
                this.carts = carts;
                this.refreshSelectedCarts();
              })
              .catch(e => console.log(e))
          })
        },
        handleLoginCarts() {
          // 已登录
          ly.http.get("/trade/cart/list").then(resp => {
            if (!resp.data || resp.data.length <= 0) {
              // 提示
              alert("你的购物车是空的，赶紧去买点东西吧！");
              return;
            }
            this.loadSku(resp.data).then(() => {
              this.carts = resp.data;
              this.refreshSelectedCarts();
            }).catch(e => {
              alert("加载购物车商品信息出错!");
            })
          }).catch(() => {
            // 提示
            alert("你的购物车是空的，赶紧去买点东西吧！");
          })
        },
        increment(c) {
          if (c.num >= c.stock) {
            alert("超出库存上限");
            return;
          }
          c.num++;
          this.isLogin().then(() => {
            // 已登录
            ly.http.put("/trade/cart", ly.stringify({
              id: c.skuId,
              num: c.num
            })).then(() => {
              this.refreshSelectedCarts();
            }).catch(() => {
              alert("服务器忙");
            })
          }).catch(() => {
            // 未登录
            ly.store.set("carts", this.carts);
            this.refreshSelectedCarts();
          })
        },
        decrement(c) {
          if (c.num <= 1) return;
          c.num--;
          this.isLogin().then(() => {
            // 已登录
            ly.http.put("/trade/cart", ly.stringify({
              id: c.skuId,
              num: c.num
            })).then(() => this.refreshSelectedCarts())
              .catch(() => {
                alert("服务器忙");
              })
          }).catch(() => {
            // 未登录
            ly.store.set("carts", this.carts);
          })
        },
        deleteCart(i) {
          const id = this.carts[i].skuId;
          this.carts.splice(i, 1);
          this.isLogin().then(() => {
            // 已登录
            ly.http.delete("/trade/cart/" + id).then(() => this.refreshSelectedCarts()).catch(() => {
              alert("服务器忙");
            });
          }).catch(() => {
            // 未登录
            ly.store.set("carts", this.carts);
            this.refreshSelectedCarts();
          })
        },
        toOrderInfo() {
          // 把已选中的购物车商品保存到localStorage
          if (!this.selectedCarts || this.selectedCarts.length < 1) {
            alert("至少要选中一件商品！");
            return;
          }
          ly.store.set("selectedCarts", this.selectedCarts);
          window.location.href = "/getOrderInfo.html";
        },
        watchNum(c) {
          if (c.num > c.stock) {
            c.num = c.stock;
            alert("超出库存上限");
          }
        },
        refreshSelectedCarts() {
          this.selectedCarts = this.carts.filter(c => c.enable);
          this.enableCarts = this.selectedCarts;
        }
      },
      watch: {
        selectAll(val, oldVal) {
          if (val) {
            this.selectedCarts = this.enableCarts;
          } else if (this.selectedCarts.length === this.enableCarts.length) {
            this.selectedCarts = [];
          }
        },
        selectedCarts: {
          deep: true,
          handler(val) {
            if (val.length === this.enableCarts.length && !this.selectAll) this.selectAll = true;
            if (val.length !== this.enableCarts.length && this.selectAll) this.selectAll = false;
          }
        }
      },
      computed: {
        totalPrice() {
          return this.selectedCarts.map(c => c.num * c.newPrice).reduce((v1, v2) => v1 + v2, 0);
        }
      },
      components: {
        shortcut: () => import("/js/pages/shortcut.js")
      }
    })
  </script>
  <!-- 底部栏位 -->
  <!--页面底部，由js动态加载-->
  <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
  <div class="clearfix footer"></div>
  <script type="text/javascript">$(".footer").load("foot.html");</script>
  <!--页面底部END-->
  <script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
  <script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
  <script type="text/javascript" src="js/widget/nav.js"></script>

</body>

</html>